<template>
  <div class="w-full lg:w-1/3 mt-6 lg:mt-0 overflow-hidden space-y-6" v-bind="$attrs">
    <div class="w-full flex items-center justify-between text-center">
      {{ title }}
    </div>
    <div class="flex flex-col">
      <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="px-2 sm:px-6 py-2 align-middle inline-block min-w-full overflow-hidden">
          <img
            class="w-76 h-48 md:w-90 md:h-auto md:rounded-none rounded-full mx-auto"
            :src="'/src/assets/img/' + img"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'LandingCryptoStatistic',
    props: {
      title: {
        type: String,
        default: '',
      },
      img: {
        type: String,
        default: '',
      },
      datasets: {
        type: Array,
        default: () => [],
      },
    },
    step() {
      const MetaUrl = '/@/assets/img/';

      function getUrl(name: string) {
        return MetaUrl + name;
      }
      return {
        MetaUrl,
        getUrl,
      };
    },
  });
</script>
